<template>
  <div class="footer-Play-Music">
    <div class="footer-Play-Music-box">
      <div class="footer-Play-Music-top-nav" @click="handlePlaynavDian">
        <div class="footer-nav-bg"></div>
        <div class="footer-nav-content" :style="{ width: playSentent }"></div>
        <div class="footer-nav-dian" :style="{ left: playSententDian }"></div>
      </div>

      <div class="footer-Play-Music-left-img" v-show="currentSong.id">
        <div class="footer-play-Music-img-box" @click="handleChangePlaylyrics">
          <div class="footer-play-Music-img">
            <img :src="$utils.getImgUrl(ResourceSwitchingImg(), 40, 40)" alt />
          </div>
          <div
            class="iconfont icon-component icon-color-white"
            :class="[ImgLog ? 'icon-shrink' : 'icon-open']"
            @click="handleplaySongsInterface"
          ></div>
          <!-- <div class="iconfont icon-component icon-shrink icon-color-white"></div> -->
          <!-- 点击之后触发的图标 -->
        </div>
        <div class="footer-play-Nusic-songs">
          <div class="footer-play-Music-top-box">
            <span class="box-songs">{{ currentSong.name }}</span>
            <span>-</span>
            <!-- currentSong.artists||currentSong.ar||currentSong.song.artists -->
            <span class="box-sigers">{{
              getName(ResourceSwitchingName())
            }}</span>
          </div>
          <div class="footer-play-Music-bottom-box">
            <span class="begin-time">{{
              getsongstime(this.currentSongTime)
            }}</span>
            <span>|</span>

            <span class="begin-time">{{
              getsongstime(ResourceSwitchingTime())
            }}</span>
          </div>
        </div>
      </div>

      <div class="footer-Play-Music-content-btn">
        <!-- 上一曲 -->
        <i
          @click="changeSongPrev"
          class="footer-Plsy-Music-content-lefe-btn icon iconfont icon-component icon-prev"
        ></i>
        <span
          class="footerPlay-Music-content-play-btn"
          @click="handleplayState"
        >
          <i
            class="iconfont icon-component"
            :class="[isPlay ? 'icon-pause' : 'icon-play']"
          ></i>
        </span>
        <!-- 下一曲 -->
        <i
          @click="changeSongNext"
          class="footer-Plsy-Music-content-right-btn icon iconfont icon-component icon-next"
        ></i>
      </div>

      <div class="footer-Play-Music-right-controller">
        <i class="mode-item mode-item iconfont icon-component icon-share"></i>
        <span @click="handlechangePlaylog">
          <!-- 播放顺序的log -->
          <i
            class="mode-item iconfont icon-component icon-sequence"
            v-show="changePlaylog === 'sequence'"
          ></i>
          <i
            class="mode-item iconfont icon-component icon-loop"
            v-show="changePlaylog === 'loop'"
          ></i>
          <i
            class="mode-item iconfont icon-component icon-random"
            v-show="changePlaylog === 'random'"
          ></i>
        </span>
        <span @click="handleChangePlaylist">
          <i
            class="mode-item iconfont icon-component icon-playlist el-popover__reference"
          ></i>
        </span>
        <div>
          <i
            class="icon iconfont icon-component"
            @click="handlechangevolume"
            :class="[volumelog ? 'icon-horn' : 'icon-silence']"
          ></i>
          <!-- icon iconfont icon-component icon-silence -->
          <!-- 控制声音 -->
          <div class="footer-play-volume" @click="handleplayVolume">
            <div
              class="foooter-play-volume-width"
              :style="{ width: playvolumewidth }"
            ></div>
            <div
              class="footer-play-volume-dian"
              :style="{ left: playvolumeDianwidth }"
            ></div>
          </div>
        </div>
        <i class="mode-item iconfont icon-component icon-github"></i>
      </div>
      <audio
        :src="audioSrc"
        @canplay="handlwcanplay"
        @timeupdate="palyupdateTime"
        @ended="changePlaySong"
        ref="audio"
      ></audio>

      <!-- 播放列表界面 -->
      <div class="songsplay-list" v-show="tigger">
        <div class="songsplay-list-nav">
          <span
            @click="taiggert(0)"
            :class="ChangelistColor1 ? 'listcolor' : ''"
            >播放列表</span
          >
          <span
            @click="taiggert(1)"
            :class="ChangelistColor2 ? 'listcolor' : ''"
            >历史记录</span
          >
        </div>
        <!-- 播放列表 -->
        <div class="songsplay-list-song-box" v-show="Changelist === 0">
          <div class="songsplay-list-Music-information">
            <div class="songsplay-list-music-number">
              <span>总共</span>
              <span>{{ SongsList.length }}</span>
              <span>首</span>
            </div>
            <div class="songsplay-list-music-hearder-log" @click="DateSonglist">
              <i class="iconfont icon-component icon-remove"></i>
              <span>清空</span>
            </div>
          </div>
          <div class="songsplay-list-nav-song">
            <div class="songsplay-list-nav1">音乐标题</div>
            <div class="songsplay-list-nav1">歌手</div>
            <div class="songsplay-list-nav2">时长</div>
          </div>
          <ul class="songsplay-list-song-box">
            <li
              class="songsplay-list-song-item"
              :class="[songsListColor === index ? 'current' : '']"
              @click="playlistSongsList(item, index)"
              v-for="(item, index) of SongsList"
              :key="item.id"
            >
              <div class="songsplay-list-song">{{ item.name }}</div>
              <div class="songsplay-list-singer">
                {{ getName(item.artists || item.ar) }}
              </div>
              <div class="songsplay-list-time">
                {{ getsongstime(item.duration || item.dt) }}
              </div>
            </li>
          </ul>
        </div>
        <!-- 历史播放界面 -->
        <div class="songsplay-list-song-box" v-show="Changelist === 1">
          <div class="songsplay-list-Music-information">
            <div class="songsplay-list-music-number">
              <span>总共</span>
              <span>{{ recordPlaysongs.length }}</span>
              <span>首</span>
            </div>
            <div
              class="songsplay-list-music-hearder-log"
              @click="dateSonglistrecord"
            >
              <i class="iconfont icon-component icon-remove"></i>
              <span>清空</span>
            </div>
          </div>
          <div class="songsplay-list-nav-song">
            <div class="songsplay-list-nav1">音乐标题</div>
            <div class="songsplay-list-nav1">歌手</div>
            <div class="songsplay-list-nav2">时长</div>
          </div>
          <ul class="songsplay-list-song-box">
            <li
              class="songsplay-list-song-item"
              v-for="(item, index) of recordPlaysongs"
              :class="[HistorysongsListColor === index ? 'current' : '']"
              :key="item.id"
              @click="HistorySongsList(item, index)"
            >
              <div class="songsplay-list-song">{{ item.name }}</div>
              <div class="songsplay-list-singer">
                {{ getName(item.artists || item.ar) }}
              </div>
              <div class="songsplay-list-time">
                {{ getsongstime(item.duration || item.dt) }}
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 歌词界面 -->
      <Lyrics v-show="lyricstigger"></Lyrics>

      <!-- 歌词界面 -->
      <!-- <Player :isShow="isShowPlayer"></Player> -->
    </div>
  </div>
</template>

<script>
//先引入vuex的status
import { mapState, mapMutations } from "vuex";

//import dateFormat from "dateformat";

//import Player from "./Player";
import Lyrics from "./lyrics";

export default {
  components: {
    // Player,
    Lyrics,
  },
  data() {
    return {
      // audioSrc: "",
      playCurrentProportion: 0,
      // playSentent: "0%",
      //playSententDian: "0%",
      // currentsongs: null,
      //不点击的时候设置为空
      //currentSong: [], //传送过来一首歌的数据

      // isPlay: false,
      beginTime: 0,
      currentSongTime: 0,
      playVolume: 0,
      //初始值
      oldplayvolume: 1,
      playVolumeDian: "100%",
      //  初始值这个是一个百分比
      volumelog: true,
      playchangevolume: 1,
      //当前歌曲的资源

      //小图片的标志
      ImgLog: false,

      //播放列表定义log的事件
      tigger: false,
      lyricstigger: false,
      //全部歌单的数据
      // SongsList: [],

      //列表歌单切换绑定的值
      Changelist: 0,
      //列表歌单标题的颜色
      ChangelistColor1: true,
      ChangelistColor2: false,
      //历史播放记录存储的数组
      recordPlaylist: [],
      Datesonglist: [],
      //播放顺序的存放数组
      changePlaylog: "sequence",
      ChangePlaylogs: ["sequence", "loop", "random"],
      ChangePlaylogIndex: 0,

      //播放顺序存放的一个
      PlaySequence: -1,
      //评论列表
      hotComments: [],
      Comment: [],
      //页码
      Total: 0,
      page: 1,
      //存放当前数组id
      ArrId: [],

      // player 显示和隐藏
      isShowPlayer: false,

      //歌词页面log控制
      isPlaying: false,
      HistorysongsListColor: 0,
    };
  },
  watch: {
    currentTime(val) {
      if (val === 0) {
        this.audioReckon.currentTime = val;
      }
    },
    isPlay(val) {
      if (val == false) {
        this.audioReckon.pause();
      }
    },
  },

  computed: {
    ...mapState([
      "currentSong",
      "showWords",
      "SongsList",
      "songsListColor",
      "currentSongComment",
      "isPlay",
      "recordPlaysongs",
      "currentTime",
    ]),

    audioSrc() {
      return this.currentSong.id
        ? this.$utils.genSongPlayUrl(this.currentSong.id)
        : "";
    },

    audioReckon() {
      return this.$refs.audio;
    },

    playSentent() {
      return this.playCurrentProportion * 100 + "%";
    },
    playSententDian() {
      return `calc(${this.playSentent} - 6px)`;
    },
    playvolumewidth() {
      return this.playchangevolume * 100 + "%";
    },
    playvolumeDianwidth() {
      return `calc(${this.playvolumewidth} - 6px)`;
    },
    //歌词界面的转东
  },

  methods: {
    ...mapMutations([
      "setShowWord",
      "setCurrentSong",
      "setSongsList",
      "setSongsListColor",
      "setcurrentSongComment",
      "setCurrentTime",
      "setplaystatus",
      "setRecordPlaylist",
    ]),

    init() {
      // this.$eventBus.$on("PlayMusic", (song, arr) => {
      //console.log(this.setSongsListColor);
      //   this.currentsongs = song;
      //   this.currentSong = song; //放置点击传送过来的数据数据一首歌
      //   this.SongsList = arr; // 传送过来的歌单全部数据
      //   this.recordPlaylist.push(song);
      // console.log(this.currenttim.id);
      //   this.audioSrc = this.$utils.genSongPlayUrl(song.id);
      // this.ArrId = this.currenttim.id;
      this.getPlayLyricsComment();

      // console.log(this.ArrId);
    },
    ResourceSwitchingImg() {
      if (this.currentSong && this.currentSong.album) {
        return this.currentSong.album.picUrl;
      }
      if (this.currentSong && this.currentSong.al) {
        return this.currentSong.al.picUrl;
      }

      return this.currentSong.picUrl;
    },
    ResourceSwitchingTime() {
      if (this.currentSong && this.currentSong.duration) {
        return this.currentSong.duration;
      }
      if (this.currentSong && this.currentSong.dt) {
        return this.currentSong.dt;
      }

      return this.currentSong.song && this.currentSong.song.duration;
    },
    ResourceSwitchingName() {
      if (this.currentSong.artists) {
        return this.currentSong.artists;
      }
      if (this.currentSong.ar) {
        return this.currentSong.ar;
      }

      return this.currentSong.song && this.currentSong.song.artists;
    },
    //////////////////////////////////////////
    ResourceSwitchingTimes() {
      if (this.currentSong.duration) {
        return (this.beginTime = this.currentSong.duration);
      }
      if (this.currentSong.dt) {
        return (this.beginTime = this.currentSong.dt);
      }

      return (this.beginTime =
        this.currentSong.song && this.currentSong.song.duration);
    },

    //切换播放歌单的列表
    taiggert(type) {
      this.Changelist = type;
      //改变颜色
      this.ChangelistColor1 = !this.ChangelistColor1;
      this.ChangelistColor2 = !this.ChangelistColor2;
    },

    handlwcanplay() {
      // this.$refs.audio.play();
      this.setplaystatus(this.isPlay);
      // console.log(this.isPlay);
      this.audioReckon.play();
    },

    palyupdateTime() {
      this.setCurrentTime(this.audioReckon.currentTime);

      //总毫秒数
      this.ResourceSwitchingTimes();

      // 当前变化时间
      this.currentSongTime = this.audioReckon.currentTime * 1000;
      //(*1000  是因为调用获取歌曲时间的方法里面用的是毫秒)

      const proportion = this.audioReckon.currentTime / (this.beginTime / 1000);

      //进度条的比例
      this.playCurrentProportion = proportion;
    },

    handleplayState() {
      //改变中间播放器的图标
      // this.isPlay = !this.isPlay;
      //vuex传状态
      this.setplaystatus(!this.isPlay);
      //console.log(this.isPlay);
      if (this.isPlay === true) {
        this.audioReckon.play();
      } else {
        this.audioReckon.pause();
      }
    },
    handlechangevolume() {
      //改变声音图标
      this.volumelog = !this.volumelog;

      if (this.volumelog === true) {
        this.playchangevolume = this.oldplayvolume;
        this.audioReckon.volume = this.oldplayvolume;
      } else {
        //this.playvolumewidth;
        this.playchangevolume = 0;
        this.audioReckon.volume = 0;
      }
    },
    playcurrenTime(proportion) {
      const currentTime = proportion * (this.beginTime / 1000);

      this.audioReckon.currentTime = currentTime;
      this.playCurrentProportion = proportion;
    },

    handlePlaynavDian(event) {
      //console.log(event);
      const c = event.offsetX;
      const w = event.target.offsetWidth;
      const proportion = c / w;
      //this.playSentent = proportion * 100 + "%";
      this.playCurrentProportion = proportion;

      this.playcurrenTime(proportion);

      //this.playSententDian = `calc(${this.playSentent} - 6px)`;
      //console.log(this.playSentent);
      //拖动进度条
      //当前时间属性currentTime
      // const currentTime = proportion * (this.beginTime / 1000);
      //console.log(currentTime);
      // this.audioReckon.currentTime = currentTime;
    },
    handleplayVolume(event) {
      const VC = event.layerX;
      const volumes = VC / 100;
      //this.playVolume = volumes * 100 + "%";
      //this.playVolumeDian = `calc(${this.playVolume} - 6px)`;
      //减号之间加空格
      //const volume = volumes;
      //音频有volume改变声音属性
      this.audioReckon.volume = volumes;
      this.playchangevolume = volumes;
      this.oldplayvolume = this.playchangevolume;
    },
    //获取歌词界面的数据

    getName(arr = []) {
      return arr
        .map((currentSong) => {
          return currentSong.name;
        })
        .join("/");
    },
    getsongstime(currentSong) {
      const ST = currentSong / 1000 / 60;
      const M = parseInt(ST);
      const S = (ST - M) * 60;
      const SS = Math.ceil(S);
      // const S = ST % 60;
      const SSS = String(SS).length === 1 ? "0" + SS : SS;

      const Times = M + ":" + SSS;

      return Times;
    },
    handleplaySongsInterface() {
      this.ImgLog = !this.ImgLog;
    },
    //播放列表的切换
    handleChangePlaylist() {
      this.tigger = !this.tigger;
    },
    handleChangePlaylyrics() {
      this.lyricstigger = !this.lyricstigger;
      // this.setShowWord(!this.showWords);
      // this.init();
      // console.log(this.lyricstigger);
      // this.togglePlayer();
    },

    //播放顺序log切换
    handlechangePlaylog() {
      this.ChangePlaylogIndex += 1;
      const index = this.ChangePlaylogIndex % this.ChangePlaylogs.length;
      this.changePlaylog = this.ChangePlaylogs[index];
    },

    changePlaySong() {
      let song = null;
      let index = this.songsListColor;
      switch (this.changePlaylog) {
        case "sequence":
          {
            this.setSongsListColor === this.SongsList.length - 1
              ? 0
              : this.setSongsListColor + 1;
            song = this.SongsList[index];
            this.changeSongNext();
          }
          break;

        case "loop":
          {
            this.audioReckon.currentTime = 0;
          }
          break;

        case "random":
          {
            index = Math.floor(Math.random() * this.SongsList.length);
            song = this.SongsList[index];
            this.playlistSongsList(song, index);
          }
          break;
      }
    },
    /////////////////

    playlistSongsList(song, index) {
      this.setCurrentSong(song);
      this.setSongsListColor(index);
      this.setRecordPlaylist(song);

      this.setplaystatus(true);
      //vuex传状态

      //console.log(this.isPlay);
    },
    HistorySongsList(song) {
      // const RecordSongs = this.SongsList.findIndex(
      //   (item) => item.id === song.id
      // );
      this.setCurrentSong(song);
      // this.setSongsListColor(RecordSongs);
      this.setRecordPlaylist(song);
      this.setplaystatus(true);
    },
    //上一曲

    changeSongPrev() {
      let index;
      // index = this.songsListColor + 1;
      switch (this.changePlaylog) {
        case "random":
          {
            index = Math.floor(Math.random() * this.SongsList.length);
            // this.playlistSongsList(song, index);
          }
          break;
        default:
          {
            // if (this.songsListColor + 1 === this.SongsList.length) {
            //   index = this.songsListColor + 1;
            // }
            index =
              this.songsListColor === this.SongsList.length - 1
                ? 0
                : this.songsListColor - 1;
          }
          break;
      }
      let song = this.SongsList[index];
      this.playlistSongsList(song, index);
    },

    //上一曲跟下一曲
    changeSongNext() {
      let index;
      // index = this.songsListColor + 1;
      switch (this.changePlaylog) {
        case "random":
          {
            index = Math.floor(Math.random() * this.SongsList.length);
            // this.playlistSongsList(song, index);
          }
          break;
        default:
          {
            // if (this.songsListColor + 1 === this.SongsList.length) {
            //   index = this.songsListColor + 1;
            // }
            index =
              this.songsListColor === this.SongsList.length - 1
                ? 0
                : this.songsListColor + 1;
          }
          break;
      }
      let song = this.SongsList[index];
      this.playlistSongsList(song, index);
    },
    //清空列表歌单里面的歌曲
    DateSonglist() {
      this.setCurrentSong({});
      this.setSongsList([]); //歌单数据赋值为空
      this.audioReckon.pause(); ///音乐暂停s
      // this.isPlay = !this.isPlay; //播放图标切换
      this.setplaystatus(false);

      // this.currentsongs = null; //左边隐藏
    },

    //清空历史歌曲里面的歌曲
    dateSonglistrecord() {
      // this.setRecordPlaylist({});
      this.setRecordPlaylist([]);
      this.audioReckon.pause();
      this.setplaystatus(false);
    },

    togglePlayer() {
      this.isShowPlayer = !this.isShowPlayer;
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.footer-Play-Music {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 60px;
  //   height: 100%;

  background-color: #fff;

  .footer-Play-Music-box {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0 20px;
  }

  .iconfont {
    cursor: pointer;
  }

  .footer-Play-Music-top-nav {
    position: absolute;
    width: 100%;
    height: 20px;
    top: -20px;
    left: 0;
    cursor: pointer;
    z-index: 5;

    &:hover {
      .footer-nav-dian {
        display: block;
      }
    }
    .footer-nav-bg,
    .footer-nav-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
    }
    .footer-nav-bg {
      background-color: transparent;
    }
    .footer-nav-content {
      background-color: rgb(211, 58, 49);
      width: 50%;
    }
    .footer-nav-dian {
      display: none;

      position: absolute;
      bottom: -5px;
      //left: 0;
      left: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: rgb(211, 58, 49);
    }
  }
  .footer-Play-Music-left-img {
    height: 44px;
    width: 300px;

    position: absolute;
    top: 6px;
    left: 2%;

    //background: seagreen;
    .footer-play-Music-img-box {
      height: 40px;
      width: 40px;
      display: flex;
      position: absolute;
      top: 3px;
      .footer-play-Music-img {
        height: 100%;
        width: 100%;
        img {
          border-radius: 5px;
        }
      }
    }
    .iconfont {
      font-size: 24px;
      position: absolute;
      top: 5px;
      left: 8px;
      color: white;
    }
    .footer-play-Nusic-songs {
      position: absolute;
      top: 3px;
      left: 55px;

      color: #4a4a4a;
      .footer-play-Music-top-box {
        width: 300px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .box-songs {
          font-size: 14px;
        }
        span {
          margin-right: 3px;
          font-size: 12px;
        }
      }
      .footer-play-Music-bottom-box {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
  .footer-Play-Music-content-btn {
    position: absolute;

    width: 124px;
    height: 100%;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .footerPlay-Music-content-play-btn {
      width: 45px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      border-radius: 50%;
      background-color: rgb(211, 58, 49);
      cursor: pointer;
      > i {
        font-size: 24px;
        color: #fff;
      }
    }

    > i {
      color: rgb(211, 58, 49);
      font-size: 24px;
      cursor: pointer;
    }
  }
  .footer-Play-Music-right-controller {
    position: absolute;
    display: flex;
    top: 20px;
    left: 70%;

    > i,
    > span {
      margin-right: 20px;
    }
    .icon-github {
      margin-left: 50px;
    }
    .footer-play-volume {
      position: relative;
      top: -25px;
      left: 25px;

      width: 100px;
      height: 30px;

      .foooter-play-volume-width {
        position: relative;
        top: 12px;
        // width: 50%;
        height: 3px;
        border-radius: 2px;

        background: #d33a31;
      }
      .footer-play-volume-dian {
        position: absolute;
        bottom: 10px;
        //left: 0;
        // left: 50%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgb(211, 58, 49);
      }
    }
  }
  .songsplay-list {
    position: fixed;
    top: 50px;
    right: 0;
    background: #f5f5f5;
    width: 400px;
    height: 612px;
    border: 1px solid rgba(58, 55, 55, 0.1);

    overflow: auto; //加这个多出页面的数据自适应
    cursor: auto;
    z-index: 4;
    .songsplay-list-nav {
      position: relative;
      width: 210px;
      margin: 12px auto;

      .listcolor {
        color: #4a4a4a;
      }
      span {
        width: 100px;
        margin: 0 20px;
        cursor: pointer;
        color: #909090;
      }
    }
    .songsplay-list-song-box {
      .songsplay-list-Music-information {
        width: 100%;
        position: relative;
        padding: 10px 25px;
        //clear: both;
        color: #4a4a4a;
        font-size: 14px;
        border-bottom: 1px solid #f2f2f1;
        cursor: pointer;

        .songsplay-list-music-number {
          display: inline;
        }
        .songsplay-list-music-hearder-log {
          float: right;
        }
      }
      .songsplay-list-nav-song {
        font-size: 13px;
        margin-left: 30px;
        padding: 10px 0px;
        margin-bottom: 10px;
        .songsplay-list-nav1 {
          float: left;
          margin-right: 100px;
        }
        .songsplay-list-nav2 {
          float: left;
          margin-right: 30px;
        }
      }
      //播放列表的样式
      .songsplay-list-song-box {
        :hover.songsplay-list-song-item {
          background: #efefef;
        }

        .songsplay-list-song-item {
          font-size: 13px;
          margin-left: 30px;
          margin-top: 5px;
          height: 20px;
          &.current {
            color: red;
          }

          > div {
            float: left;

            //文本三件套
            margin-bottom: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .songsplay-list-song {
            width: 100px;
          }
          .songsplay-list-singer {
            margin-left: 50px;
            width: 100px;
          }
          .songsplay-list-time {
            margin-left: 27px;
            width: 50px;
          }
        }
      }
    }
  }
}
</style>
